<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="./static/element-ui@2.15.14-theme-chalk.min.css">
</head>
<body>
<div id="app">
    <template>
        <div style="display: flex;justify-content: center;">
            <el-card style="width: 60%;">
                <div slot="header" class="clearfix">
                    <h1>简易安装程序</h1>
                </div>
                <el-form ref="form" :model="form" :rules="rules" label-width="150px" v-loading="loading">
                    <h2>数据库信息</h2>
                    <el-divider></el-divider>
                    <el-form-item label="数据库服务器" prop="db_server">
                        <el-input v-model="form.db_server" placeholder="数据库服务器地址，一般为localhost"></el-input>
                    </el-form-item>
                    <el-form-item label="数据库名称" prop="db_name">
                        <el-input v-model="form.db_name" placeholder="请输入数据库名称"></el-input>
                    </el-form-item>
                    <el-form-item label="数据库用户名" prop="db_user">
                        <el-input v-model="form.db_user" placeholder="请输入数据库用户名"></el-input>
                    </el-form-item>
                    <el-form-item label="数据库密码" prop="db_pwd">
                        <el-input v-model="form.db_pwd" placeholder="请输入数据库密码"></el-input>
                    </el-form-item>
                    <el-form-item label="数据库端口" prop="db_port">
                        <el-input v-model="form.db_port" placeholder="数据库默认端口一般为3306"></el-input>
                    </el-form-item>
                    <el-form-item label="新建/覆盖" prop="renew">
                        <el-radio-group v-model="form.db_new">
                            <el-radio-button :label="0">新建</el-radio-button>
                            <el-radio-button :label="1">覆盖</el-radio-button>
                        </el-radio-group>
                    </el-form-item>
                    <el-divider></el-divider>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">立即创建</el-button>
                    </el-form-item>
                </el-form>
            </el-card>
        </div>
    </template>
</div>
</body>
<!-- import Vue before Element -->
<script src="./static/Vue.js"></script>
<!-- import JavaScript -->
<script src="./static/element-ui@2.15.14.js"></script>
<!-- import axios -->
<script src="./static/axios.min.js"></script>

<script type="text/javascript">
    new Vue({
        el: '#app',
        data: function() {
            return {
                loading: false,
                form: {
                    db_server: 'localhost',
                    db_name: 'simplest_admin',
                    db_user: '',
                    db_pwd: '',
                    db_port: '3306',
                    db_new: 0,
                },
                rules: {
                    db_server: [
                        { required: true, message: '请输入数据库服务器地址', trigger: 'blur' },
                    ],
                    db_name: [
                        { required: true, message: '请输入数据库名称', trigger: 'blur' },
                    ],
                    db_user: [
                        { required: true, message: '请输入数据库用户名', trigger: 'blur' },
                    ],
                    db_pwd: [
                        { required: true, message: '请输入数据库用户名的密码', trigger: 'blur' },
                    ],
                }
            }
        },
        methods: {
            onSubmit(){
                let that = this
                that.loading = true
                axios.post('/admin/Index/install', this.form)
                    .then(function (response) {
                        console.log(ELEMENT)
                        that.loading = false
                        if(response.data.status == 200){
                            ELEMENT.MessageBox.confirm('安装成功').then(()=>{
                                location.href='/'
                            })
                        } else {
                            ELEMENT.Message.error(response.data.msg)
                        }
                    })
                    .catch(function (error) {
                        that.loading = false
                        console.log(error);
                    });
            }
        }
    })
</script>
</html>